import { ref } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import dayjs from 'dayjs'
/**
 * 检测可见，发送请求
 * @param apiFn 发送请求的函数
 * @returns {Object} target
 */
export const useObserver = (apiFn: () => void) => {
  // 被检测可见性的目标元素
  const target = ref(null)
  // 调用检测元素可见性的方法
  // stop            用于停止检测的函数
  // target          被检测的目标元素/组件
  // isIntersecting  目标元素是否可见 true/false
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // 如果元素可见
      if (isIntersecting) {
        // 1. 发送请求获取数据
        apiFn()
        // 2. 停止检测
        stop()
      }
    }
  )
  return target
}

/**
 * 倒计时逻辑函数封装
 * @param {Number} time 倒计时秒数
 * @returns {Object} { countTime, start, pause }
 */
export const useCountDown = (time = 60) => {
  // 用于倒计时的响应式数据
  const countTime = ref(0)
  const countTimeText = ref('')

  // 定时器 resume 用于启动，pause 用于停止
  const { resume, pause } = useIntervalFn(() => {
    // 每隔一段时间秒数减一
    countTime.value--
    countTimeText.value = dayjs.unix(countTime.value).format('mm分ss秒')
    // 倒计时结束停止定时器
    if (countTime.value <= 0) {
      pause()
    }
    // { immediate: false } 表示不立刻执行定时器（调用后执行）
  }, 1000, { immediate: false })

  // 启动倒计时的函数封装
  const start = (newTime?: number) => {
    // 初始化倒计时秒数
    if (countTime.value === 0) {
      countTime.value = newTime || time
      countTimeText.value = dayjs.unix(countTime.value).format('mm分ss秒')
    }
    // 启动定时器
    resume()
  }

  // 返回给模板使用的数据
  return { countTime, countTimeText, start, pause }
}
